<template>
	<!-- vue3页面 -->
	<view class="Login-page">
		<image mode="aspectFill" src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/denglu-yemian.jpg">
		</image>
		<button @click="login">授权登陆</button>
	</view>
</template>

<script lang='ts' setup>
// 1.引入基础模块
import { defineComponent, reactive } from 'vue'
import { reqWxlogin } from "@/serve/api"
// 2.定义登录方法
function login() {
	// 2.1获取用户头像和昵称信息
	uni.getUserProfile({
		desc: "用户完善会员信息",
		success: res => {
			let { nickName, avatarUrl } = res.userInfo
			// 2.2获取用户的临时登录令牌code(有效期5分钟)
			uni.login({
				success: async (res) => {
					// 2.3发起登录请求
					try {
						let info = await reqWxlogin({ nickName, avatarUrl, code: res.code, appid: "wx2f26909d14cc3fdf", secret: "bd79d02452a3b4cca507bab3667bda0f" })
						// console.log(info)
						uni.setStorageSync('memberInfo', info.data)
						uni.showToast({ title: "登录成功！" })
						setTimeout(() => { uni.navigateBack({ delta: 1 }) }, 500)
					} catch (error) {
						console.log(error)
					}
				}
			})
		}
	})
}

</script>

<style scoped>
.Login-page {
	position: relative;
	height: 100vh;
	overflow: hidden;
}

.Login-page image {
	width: 100%;
	height: 100%;
}

.Login-page button {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	bottom: 30%;
	background-color: #2c76ef;
	color: #ffffff;
	padding: 0 100rpx;
	font-size: 35rpx;
}
</style>